<template>
<div class="group-header">
  <el-button-group>
    <el-button :type="condition === 'and' ? 'primary' : ''" size="small" @click="switchCondition('and')">AND</el-button>
    <el-button :type="condition === 'or' ? 'primary' : ''" size="small" @click="switchCondition('or')">OR</el-button>
  </el-button-group>
  <el-popover width="200" trigger="hover">
    <div>
      <div><el-button type="text" size="mini" icon="el-icon-plus" @click='add("group")'>ADD GROUP</el-button></div>
      <div><el-button type="text" size="mini" icon="el-icon-plus" @click='add("condition")'>ADD CONDITION</el-button></div>
    </div>
    <div slot="reference" class="el-icon-circle-plus-outline group-action"></div>
  </el-popover>
  <div @click="removeBuilder" class="el-icon-circle-close group-action" v-if="showDelete"></div>
</div>
</template>

<script>
export default {
  name: 'group-header',
  props: ['condition', 'showDelete'],
  data () {
    return {}
  },
  methods: {
    switchCondition (val) {
      this.$emit('update:condition', val)
    },
    add (type) {
      this.$emit('add', type)
    },
    removeBuilder () {
      this.$emit('removeBuilder')
    }
  }
}
</script>

<style scoped lang="scss">
.group-header {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
}
.group-action {
  margin-left: 20px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
</style>
